/**
 * @description 瀑布流方法
 * @param {String} selector = [.item] 瀑布流的选择器
 * @param {Number} column = [2] 栏的数量
 * @param {Number} gap = [10] 栏间距
 * @param {document|HTMLElement}  = [document] 瀑布流参照父节点
 */
function waterFall(selector = ".item", column = 2, gap = 10, parent = document) {
	// 分两栏
	// var column = 2;
	// 间距
	// var gap = 10;
	// 列宽 一列的宽度(动态计算间距)
	var width = window.innerWidth;
	if (parent != document) {
		parent.style.position = "relative";
		width = parent.offsetWidth;
	}
	var colWidth = (width - (column + 1) * gap) / column;
	// 数组存储高度（记录最小高都）
	var arr = [];
	// 设置数组长度
	arr.length = column;
	// 填充初始值为0;（默认值为0）
	arr.fill(0);
	// 获取所有的item

	var items = parent.querySelectorAll(selector);
	// 遍历items
	for (var i = 0; i < items.length; i++) {
		// 绝对定位
		items[i].style.position = "absolute";
		// 设置宽
		items[i].style.width = colWidth + "px";
		// 找到arr数组的最小的列
		var min = Math.min(...arr);
		var minIndex = arr.indexOf(min);
		// 动态算出left和top值
		// 如果minINdex值是0// left = 0*10+10+172.5*0+"px" 10px					
		// 如果minIndex值1 // left = 1*10+10+172.5*1+"px"192.5px					
		items[i].style.left = minIndex * gap + gap + colWidth * minIndex + "px";
		items[i].style.top = arr[minIndex] + gap + "px";
		// 获取元素的高
		var h = items[i].offsetHeight;
		// 更新minIndex的值 = 原来的值+元素的高+间距
		arr[minIndex] = arr[minIndex] + h + gap;
	}
}
export default waterFall;
